// @import "src/styles/base/fn";
.mui-dialog-panel {
    // z-index: 5000;
    width: px2rem(600);
    background-color: #fff;
    text-align: center;
    border-radius: px2rem(12);
    overflow: hidden;
}

.mui-dialog__title {
    font-weight: normal;
    font-size: $fontSizeLevel2;
    vertical-align: bottom;
}

.mui-dialog__hd {
    //height: 140px;
    line-height: px2rem(36);
    padding: px2rem(49) px2rem(60) px2rem(29);
}

.mui-dialog__bd {
    padding: 0 px2rem(60) px2rem(34);
    font-size: $fontSizeLevel4;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-all;
    color: $textColorGeneral;

    &:first-child {
        padding: px2rem(44) px2rem(60) px2rem(35);
        color: #353535;
    }
}

.mui-dialog__ft {
    position: relative;
    line-height: px2rem(100);
    font-size: $fontSizeLevel2;
    display: flex;

    &:after {
        @include setTopLine($lineColorLight);
    }
}

.mui-dialog__btn {
    display: block;
    flex: 1;
    color: $textColorImportant;
    text-decoration: none;
    @include setTapColor();

    &:active {
        background-color: #f2c402;
    }

    position: relative;

    &:after {
        content: " ";
        @include setLeftLine($lineColorLight);
    }

    &:first-child {
        &:after {
            display: none;
        }
    }
}

.mui-dialog__btn_default {
    color: #666666;
    font-size: $fontSizeLevel2;

    &:active {
        background-color: #fff;
    }
}

.mui-dialog__btn_primary {
    color: #F99E00;
    font-size: $fontSizeLevel2;

    &:active {
        background-color: #fff;
    }
}

.mui-dialog-fade-enter-active {
    animation: dialog-fadein .4s;

    .mui-dialog-panel {
        animation: dialog-zoom .4s
    }
}

@keyframes dialog-fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes dialog-zoom {
    0% {
        transform: scale(0)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}
